<template>
  <div v-loading="!noticeTypesArray||loading" class="bd-dynamic-news">
    <div v-if="noticeTypesArray">
      <div class="dynamic-title1">
        最新通知
        <SvgIcon icon-class="notice" />
      </div>
      <NoData v-show="totalCount===0" />
      <div v-if="totalCount !== 0" class="news-list">
        <div v-for="item in noticeList" :key="item.id" class="news-item">
          <div class="decoration">
            <div class="news-circle">
              <div class="solid-circle" />
            </div>
          </div>
          <div class="news-box" @click="getDetails(item.id)">
            <a class="news-title">{{ item.title }}</a>
            <div class="news-time">{{ parseTime(item.sendTime,'{y}-{m}-{d}') }}</div>
          </div>
        </div>
      </div>
      <div v-if="totalCount !== 0" class="more-news">
        <router-link to="/documentAndNotice">
          <a>
            <span>
              更多通知
              <i class="el-icon-arrow-right" />
            </span>
          </a>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { list } from '@/api/zzxt/notice'
import { parseTime } from '@/utils'
export default {
  name: 'NoticeSummary',
  components: {
    NoData: () => import('@/views/Loading/NoData')
  },
  data: () => ({
    loading: false,
    noticeList: null,
    totalCount: 0
  }),
  computed: {
    noticeTypesArray() {
      return this.$store.state.notice.noticeTypesArray
    }
  },
  watch: {
    noticeTypesArray: {
      handler(val) {
        if (!val) return
        this.refresh()
      },
      immediate: true
    }
  },
  methods: {
    parseTime,
    async refresh() {
      if (this.loading) return
      this.loading = true
      const page = { pageIndex: 0, pageSize: 6 }
      const query = {
        page,
        type: this.noticeTypesArray
      }
      await list(query)
        .then(data => {
          this.noticeList = data.list
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    getDetails(row) {
      this.$router.push({
        path: '/documentAndNotice/notice/viewer',
        query: {
          id: row
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../home/style.scss';
</style>
